<template>
      <div class="userinpatinente-container">
    <el-descriptions :column="4" border v-for="(item, index) in tableData"
                    :key="index" direction="vertical"  class="myDesc">
      <el-descriptions-item align="center" label="住院编号" >{{item.hlId}}</el-descriptions-item>
      <el-descriptions-item align="center" label="病人名字" >{{item.patientName}}</el-descriptions-item>
      <el-descriptions-item align="center" label="楼层"  >{{item.floor}}</el-descriptions-item>
      <el-descriptions-item align="center" label="房间号码" >{{item.roomNumber}}</el-descriptions-item>
      <el-descriptions-item align="center" label="床号">{{item.bedNumber}}</el-descriptions-item>
      <el-descriptions-item align="center" label="疾病名称" >{{item.diseaseName}}</el-descriptions-item>
      <el-descriptions-item align="center" label="住院时间" >
        {{item.hlTime}}
        </el-descriptions-item>
      <el-descriptions-item align="center" label="出院时间" >
        {{item.dischargeTime  === null ? '未出院':item.dischargeTime}}
        </el-descriptions-item>
    </el-descriptions>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[1, 2]"
      :page-size="pageInfo.limit"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
      class="myStyle">
      </el-pagination>
 
    </div>
    
</template>

<script>
import axios from "axios";
export default {
    comName: '住院',
    comSort: 3,
    name: 'inpatinente',
    data(){
       return{
        tableData: [],
        pageInfo: {
            page: 1,
            limit: 1,
            total: 0,
        },
       }
    },
  mounted() {
    this.getdata();
  },
  methods: {
    getdata () {
      axios({
        url: "/api/user/hospitalizationlist",
        method: "get",
        params: {
          uId:sessionStorage.getItem("uId"),
          limit:this.pageInfo.limit,
          page:this.pageInfo.page,
        },
        headers: {
          token: sessionStorage.getItem("Token"),
        },
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.list;
        this.pageInfo.total=res.data.total

      });
    },
    // 每页多少条切换
    handleSizeChange (value) {
      this.pageInfo.limit = value

      this.getdata()
    },
    // 当前页码的切换
    handleCurrentChange (value) {
      this.pageInfo.page = value
        this.getdata()
    }
  } 
}
</script>

<style lang="scss" scoped>
.userinpatinente-container{
    width: 100%;
    height: 100%;
        display: flex;
        flex-direction: column;
       align-items: center;
       margin-top: 5px;

.myDesc {
    width: 90%;
    margin-top: 15px;
    margin-bottom: 15px;
    /deep/ .el-descriptions__body {
      .el-descriptions__table {
        tbody {
          tr{
            font-size: 15px;
            color: rgb(43, 42, 42);
            font-weight: bolder;
          }
          tr:first-child {
            th {
               color: rgb(43, 42, 42);
              background: rgb(230, 239, 255);
            }
          }
        }
      }
    }
  }
}
.myStyle{
  margin-top: 30px;
}
</style>